<template>
  <c-card style="padding-bottom: 1px;">
    <el-form size="default">
<!--      <el-form-item label="价格：">-->
<!--        <el-radio-group v-model="priceType" @change="getPageList">-->
<!--          <el-radio value="">全部</el-radio>-->
<!--          <el-radio value="0">0~5</el-radio>-->
<!--          <el-radio value="1">5~10</el-radio>-->
<!--          <el-radio value="2">10~20</el-radio>-->
<!--          <el-radio value="3">20~50</el-radio>-->
<!--          <el-radio value="4">50~100</el-radio>-->
<!--          <el-radio value="5">100~3000</el-radio>-->
<!--        </el-radio-group>-->
<!--      </el-form-item>-->
      <el-form-item label="级别：">
        <el-radio-group v-model="typeValue" @change="getPageList">
          <template v-for="item in typeOptions">
            <el-radio :value="item.value">{{item.label}}</el-radio>
          </template>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="模型：">
        <el-checkbox-group v-model="modelValue" @change="getPageList">
          <template v-for="item in modelOptions">
            <el-checkbox :value="item.value">{{item.label}}</el-checkbox>
          </template>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
  </c-card>
  <c-card>
    <el-button link type="primary" @click.stop="detailHandle">
      多图
    </el-button>
    <el-table @row-click="rowHandle"
              @selectionChange="selectionChange"
              :data="tableData" stripe highlight-current-row >
      <el-table-column type="selection" width="30" />
      <el-table-column prop="createDate" label="创建时间" width="180"/>
      <el-table-column prop="stockCode" label="股票代码"/>
      <el-table-column prop="stockName" label="股票名称"/>
      <el-table-column prop="bkName" label="行业板块"/>
      <el-table-column prop="price" label="最新价">
        <template #default="{row}">
          <el-text :type="getColorName(row.ratio)">{{row.price}}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="ratio" label="涨跌比">
        <template #default="{row}">
          <el-text :type="getColorName(row.ratio)">{{row.ratio}}%</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="rise" label="涨跌额">
        <template #default="{row}">
          <el-text :type="getColorName(row.ratio)">{{row.rise}}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="prec" label="昨收"/>
      <el-table-column prop="limitUp" label="涨停"/>
      <el-table-column prop="limitDown" label="跌停"/>
      <el-table-column prop="chain" label="环比">
        <template #default="{row}">
          <el-text v-if="row.chain > 0" type="danger">{{row.chain}}%</el-text>
          <el-text v-else-if="row.chain < 0" type="success">{{row.chain}}%</el-text>
          <el-text v-else>{{row.chain}}%</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="mark" label="模型"/>
      <el-table-column fixed="right" label="操作">
        <template #default="{row}">
          <el-button link type="primary" @click.stop="rcHandle(row)">
            关注
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <c-pagination @page-change="pageChange" :total="pagination.total" :page="pagination.page"
                  :limit="pagination.pageSize"></c-pagination>
  </c-card>
</template>

<script setup>
import {provide, reactive, ref} from "vue";
import {DEL, GET, POST} from "../../../api/index.js";
import {filterStockList, getColorName, notify, toStockDetail} from "../../../utils/commonScript.js";
import CCard from "../../../c-components/c-card.vue";
import {modelOptions, pageOptions, typeOptions} from "../../../utils/listData.js";
import {useRouter} from "vue-router";
import CPagination from "../../../c-components/c-pagination.vue";

const router = useRouter()
const iframeRef = ref(null)
const tableData = ref([])
const keyword = ref('')
const priceType = ref('')
const typeValue = ref('30')
const isLoading = ref(false)
const pagination = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
});
const modelValue = ref(['1'])
const stockCode = ref('000000')
const selectIds = ref([])
const selectNames = ref([])

provide('stockCode', stockCode)

const selectionChange = (rows) => {
  selectIds.value = rows.map(item => item.stockCode)
  selectNames.value = rows.map(item => item.stockName)
}
const detailHandle = () => {
  if(selectIds.value.length){
    toStockDetail(router, selectIds.value.join(), selectNames.value.join())
  } else{
    notify('请勾选要显示的股票', 'error')
  }
}

const rowHandle = (row) => {
  toStockDetail(router, row.stockCode, row.stockName)
}
const delHandle = (ids) => {
  DEL('/market/mark', ids).then(res => {
    notify("删除成功", "success")
    getPageList()
  })

}

const pageChange = (page, pageSize) => {
  pagination.page = page
  pagination.pageSize = pageSize
  getPageList()
}

const sortHandle = () => {
  console.log('---')
  tableData.value = tableData.value.sort((a,b) => {
    return b.chain - a.chain
  })
}

// 获取所有股票信息
const getPageList = () => {
  isLoading.value = true
  GET("/market/mark/page", {
    page: pagination.page,
    pageSize: pagination.pageSize,
    stockName: keyword.value,
    mark: modelValue.value.sort().join(','),
    level: typeValue.value,
    priceType: priceType.value,
    orderField: 'ratio',
    order: 'desc'
  }).then(res => {
    pagination.total = res.data.total
    tableData.value = res.data.list.map(item => {
      item.chain = Number(((item.price - item.markPrice) * 100/ item.markPrice).toFixed(2))
      return item
    }).sort((a,b) => {
      return b.chain - a.chain
    })

    isLoading.value = false
  }).catch(() => {
    isLoading.value = false
  })

}
getPageList()

const rcHandle = (row) => {
  POST('/market/user', {
    stockCode: row.stockCode,
  }).then(res => {
    notify("关注成功", "success")
  })

}

const searchHandle = () => {
  tableData.value = []
  pagination.page = 1
  pagination.pageSize = 20
  pagination.total = 0
  getPageList()
}

const resetHandle = () => {
  keyword.value = ''
  searchHandle()
}

</script>

<style lang="scss" scoped>
.market {
  .search {
    height: 4vh;
    margin-bottom: 2vh;
    display: flex;

    .c-input {
      margin-right: 10px;
      flex: 3;
    }

    .c-button {
      flex: 1;
    }
  }
}

</style>
